<template>
  <div id="sendGoods">
    <!-- 发货，收货 用户信息 -->
    <el-form ref="ruleForm" label-position="left" :model="ruleForm" :rules="rules" label-width="90px">
      <el-row :gutter="50" class="personMes">
        <el-col :span="12" class="catalog">
          <span class="tag">发</span>
          <span class="title">发货地</span>
          <router-link to="/oftenrace" tag="span" class="tip">常跑路线</router-link>
        </el-col>
        <el-col :span="12" class="catalog">
          <span class="tag receive">收</span>
          <span class="title">收货地</span>
        </el-col>
        <el-col :span="10" class="mt24">
          <city @getProvince="getProvince" @getCity="getCity" @getArea="getArea" title="发货地址" :ruleForm='radioData1' />
        </el-col>
        <el-col :span="2" class="addressbook">
          <span class="title" @click="addressDialog = true">地址薄</span>
        </el-col>
        <el-col :span="10" class="mt24">
          <city @getProvince="getProvince2" @getCity="getCity2" @getArea="getArea2" title="收货地址"
            :ruleForm='radioData2' />
        </el-col>
        <el-col :span="2" class="addressbook">
          <span class="title" @click="addressDialog = true">地址薄</span>
        </el-col>

        <el-col :span="12">
          <el-form-item label="详细地址" prop="address">
            <el-input v-model="ruleForm.address" size="small"></el-input>
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="详细地址" prop="address">
            <el-input v-model="ruleForm.address2" size="small"></el-input>
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-row :gutter="50">
            <el-col :span="10">
              <el-form-item label="发货人" prop="name">
                <el-input v-model="ruleForm.name" size="small"></el-input>
              </el-form-item>
            </el-col>
            <el-col :span="14">
              <el-form-item label-width="110px" label="发货人手机号" prop="phone">
                <el-input v-model="ruleForm.phone" size="small"></el-input>
              </el-form-item>
            </el-col>
          </el-row>
        </el-col>
        <el-col :span="12">
          <el-row :gutter="30">
            <el-col :span="10">
              <el-form-item label="收货人" prop="name">
                <el-input v-model="ruleForm.name2" size="small"></el-input>
              </el-form-item>
            </el-col>
            <el-col :span="14">
              <el-form-item label-width="110px" label="收货人手机号" prop="phone">
                <el-input v-model="ruleForm.phone2" size="small"></el-input>
              </el-form-item>
            </el-col>
          </el-row>
        </el-col>
        <el-col :span="12">
          <el-form-item label="取货截止" required>
            <el-form-item prop="time">
              <el-date-picker type="datetime" placeholder="选择截止时间" v-model="ruleForm.time" default-time="12:00:00"
                style="width: 100%;"></el-date-picker>
            </el-form-item>
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="要求送达" required>
            <el-form-item prop="time2">
              <el-date-picker type="datetime" placeholder="选择送达时间" v-model="ruleForm.time2" default-time="12:00:00"
                style="width: 100%;"></el-date-picker>
            </el-form-item>
          </el-form-item>
        </el-col>
      </el-row>
      <!-- 货物信息 -->
      <el-row class="goodsMes" :gutter="50">
        <p class="title">货物信息</p>
        <el-col :span="6">
          <el-form-item label="货物名称" prop="type">
            <el-select v-model="ruleForm.type" placeholder="请选择货物名称" size='small'>
              <!-- <el-option label="" value="100" selected="selected"></el-option> -->
              <el-option v-for="item in ruleForm.typeList" :label="item.label" :key="item.value" :value="item.value">
              </el-option>
            </el-select>
          </el-form-item>
        </el-col>
        <el-col :span="6">
          <el-form-item label="发货类型" prop="sendType">
            <el-select v-model="ruleForm.sendType" placeholder="请选择发货类型" size='small'>
              <el-option label="大宗" value="大宗"></el-option>
              <el-option label="整车" value="整车"></el-option>
            </el-select>
          </el-form-item>
        </el-col>
        <el-col v-show="ruleForm.sendType=='大宗'" :span="6">
          <el-form-item label="货物单位" prop="unit">
            <el-select v-model="ruleForm.unit" placeholder="请选择货物单位" size='small'>
              <el-option label="吨" value="吨"></el-option>
              <el-option label="方" value="方"></el-option>
              <el-option label="件" value="件"></el-option>
            </el-select>
          </el-form-item>
        </el-col>
        <el-col v-show="ruleForm.sendType=='大宗'" :span="6">
          <el-form-item label="订单量" prop="number">
            <el-input v-model="ruleForm.number" size="small"></el-input>
          </el-form-item>
        </el-col>
      </el-row>
      <!-- 发货方式 -->
      <div class="sendGoods">
        <p class="title">发货方式</p>
        <el-row :gutter="50">
          <el-col :span="6">
            <el-form-item label="发货模式" prop="mode">
              <el-select disabled v-model="ruleForm.mode" placeholder="请选择发货模式">
                <el-option label="委托平台" value="委托平台"></el-option>
              </el-select>
            </el-form-item>
          </el-col>
          <el-col v-show="ruleForm.mode=='指派承运商'" :span="6">
            <el-form-item label-width="110px" label="请选择承运商" prop="carrier">
              <el-select v-model="ruleForm.carrier" placeholder="请选择发货模式">
                <el-option label="中通物流有限公司" value="中通物流有限公司"></el-option>
                <el-option label="顺丰速递物流有限公司" value="顺丰速递物流有限公司"></el-option>
              </el-select>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row :gutter="50">
          <el-col :span="9">
            <el-form-item class="price" label="运费单价">
              <el-input width="100" :disabled="ruleForm.radio==1" placeholder="请输入内容" v-model="ruleForm.price"
                class="input-with-select">
                <el-select v-model="ruleForm.unit" slot="append" placeholder="请选择">
                  <el-option label="吨" value="吨"></el-option>
                  <el-option label="方" value="方"></el-option>
                  <el-option label="件" value="件"></el-option>
                </el-select>
              </el-input>
            </el-form-item>
            <!-- 整车 -->
            <!-- <el-form-item class="price" label="运费单价">
              <el-input width="100" :disabled="ruleForm.radio==1" placeholder="请输入内容" v-model="ruleForm.price"
                class="input-with-select">
                <el-select v-show="ruleForm.sendType=='大宗'" v-model="ruleForm.unit" slot="append" placeholder="请选择">
                  <el-option label="车" value="车"></el-option>
                </el-select>
              </el-input>
            </el-form-item> -->
          </el-col>
          <el-col :span="3">
            <el-form-item class="price1">
              <el-checkbox true-label="1" false-label="0" v-model="ruleForm.radio">发布询价单</el-checkbox>
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <el-form-item label="预估总价">
              <el-input disabled v-model="totalPrice" size="small"> <template slot="append">元</template></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <el-form-item label="付款方式" prop="payment">
              <el-select v-model="ruleForm.payment" placeholder="请选择付款方式">
                <el-option label="月结" value="月结"></el-option>
                <el-option label="到付" value="到付"></el-option>
                <el-option label="现付" value="现付"></el-option>
                <el-option label="回单付" value="回单付"></el-option>
              </el-select>
            </el-form-item>
          </el-col>
        </el-row>
      </div>
    </el-form>
    <!-- 其他 -->
    <el-row class="other" :gutter="50">
      <p class="title">其他</p>
      <el-form label-position="left" :model="other" label-width="90px" size="small">
        <el-col :span="6">
          <el-form-item label="需求车型">
            <el-input v-model="other.carModel" size="small"></el-input>
          </el-form-item>
        </el-col>
        <el-col :span="6">
          <el-form-item label="需求车长">
            <el-input v-model="other.carLength" size="small"></el-input>
          </el-form-item>
        </el-col>
        <el-col :span="6">
          <el-form-item label="车辆载重">
            <el-input v-model="other.carWeight" size="small"><template slot="append">吨</template></el-input>
          </el-form-item>
        </el-col>
        <el-col :span="6">
          <el-form-item label="允许损耗">
            <el-input v-model="other.carLoss" size="small"><template slot="append">%</template></el-input>
          </el-form-item>
        </el-col>
        <el-col :span="24">
          <el-form-item label="备注">
            <el-input v-model="other.remarks" size="small"></el-input>
          </el-form-item>
        </el-col>
      </el-form>
    </el-row>
    <div class="submitBUTTON mt80">
      <button @click="submitTo()">保存</button>
      <button>取消</button>
    </div>

    <!-- 地址薄 -->
    <div class="addressRadio">
      <el-dialog title="地址薄" :visible.sync="addressDialog" center>
        <el-form :inline="true" class="formone fb">
          <div>
            <el-form-item>
              <el-input style="width:356px" prefix-icon="el-icon-search" v-model="searchVal" placeholder="请输入发货人/发货人手机号"
                size="small"></el-input>
            </el-form-item>
            <el-form-item>
              <el-button type="primary" size="small">搜索</el-button>
            </el-form-item>
          </div>
          <el-form-item>
            <el-button size="small" @click="addTo"> <i class="el-icon-plus"></i> 新增地址</el-button>
          </el-form-item>
        </el-form>
        <el-table ref="multipleTable" highlight-current-row height="420" :data="gridData">
          <el-table-column width="55">
            <template slot-scope="scope">
              <el-radio @change.native="getTemplateRow(scope.$index,scope.row)" v-model="radioIndex"
                :label="scope.row.id"></el-radio>
            </template>
          </el-table-column>
          <el-table-column label="联系人" width="150">
            <template slot-scope="data">
              <div>{{data.row.name}}</div>
              <div>{{data.row.phone}}</div>
            </template>
          </el-table-column>
          <el-table-column label="地址">
            <template slot-scope="data">
              <div>{{ data.row.province + data.row.city +data.row.area }}</div>
              <div>{{data.row.address}}</div>
            </template>
          </el-table-column>
          <el-table-column label="操作" width="150">
            <template slot-scope="scope">
              <el-button @click="reviseSure(scope.row)" type="text" size="small"><img class="iconimg"
                  :src="require('@/assets/img/iconfont/edit.png')" alt=""></el-button>
              <el-button @click="deleteSure(scope.$index, gridData)" type="text" size="small"><img class="iconimg"
                  :src="require('@/assets/img/iconfont/delete.png')" alt=""></el-button>
            </template>
          </el-table-column>
        </el-table>
        <div slot="footer" class="dialog-footer">
          <el-pagination background layout="prev, pager, next" :total="50" :size="10">
          </el-pagination>
          <div class="btn"><button @click="adressSure()">确定选择</button></div>
        </div>
      </el-dialog>
    </div>

    <!-- 新增地址 -->
    <div class="addAddress">
      <el-dialog title="新增地址" :visible.sync="addAddressDialog" center>
        <el-form label-position="left" :model="sendMes" :rules="rules" label-width="90px">
          <el-row>
            <el-row :gutter="50">
              <el-col :span="12">
                <el-form-item label="姓名" prop="addName">
                  <el-input v-model="sendMes.addName" placeholder="请输入联系人姓名" size="small"></el-input>
                </el-form-item>
              </el-col>
              <el-col :span="12">
                <el-form-item label-width="110px" label="手机号码" prop="addPhone">
                  <el-input v-model="sendMes.addPhone" placeholder="请输入联系人手机号" size="small"></el-input>
                </el-form-item>
              </el-col>
            </el-row>
            <el-col :span="24">
              <city @getProvince="getProvince" @getCity="getCity" @getArea="getArea" title="地址" />
            </el-col>
            <el-col :span="24">
              <el-form-item label="详细地址" prop="addAddress">
                <el-input v-model="sendMes.addAddress" placeholder="请输入详细地址" size="small"></el-input>
              </el-form-item>
            </el-col>
          </el-row>
        </el-form>
        <div slot="footer" class="dialog-footer">
          <div class="btn"><button @click="addAddressDialog=false">确定</button></div>
        </div>
      </el-dialog>
    </div>

  </div>
</template>

<script>
import { apiSendGoods } from "@/utils/api";
import { UTCtime } from "@/utils/util";
import city from "@/components/city";
export default {
  name: "sendGoods",
  components: {
    city
  },
  watch: {
    "ruleForm.radio": {
      deep: true,
      handler: function(newV, oldV) {
        if (oldV == 0) {
          this.ruleForm.price = "";
        }
      }
    }
  },
  data() {
    return {
      // 发货地
      ruleForm: {
        province: "",
        city: "",
        area: "",
        address: "",
        name: "",
        phone: "",
        time: "",
        // 收货地
        province2: "",
        city2: "",
        area2: "",
        address2: "",
        name2: "",
        phone2: "",
        time2: "",
        // 货物信息
        typeList: [
          { value: "1", label: "普货" },
          { value: "2", label: "重货" },
          { value: "3", label: "建材" },
          { value: "4", label: "木材" },
          { value: "5", label: "石材" },
          { value: "6", label: "棉花" },
          { value: "7", label: "玻璃" },
          { value: "8", label: "水泥" },
          { value: "9", label: "石" }
        ],
        type: "",
        sendType: "",
        unit: "",
        number: "",
        worth: "",
        // 发货方式
        mode: "委托平台",
        carrier: "",
        price: "",
        radio: "0",
        payment: ""
      },
      // 其他
      other: {
        carModel: "",
        carLength: "",
        carWeight: "",
        carLoss: "",
        remarks: ""
      },
      // 新增地址
      sendMes: {
        addName: "",
        addPhone: "",
        addAddress: ""
      },
      rules: {
        address: [
          { required: true, message: "请输入详细地址", trigger: "blur" }
        ],
        addAddress: [
          { required: true, message: "请输入详细地址", trigger: "blur" }
        ],
        name: [{ required: true, message: "请输入姓名", trigger: "blur" }],
        addName: [{ required: true, message: "请输入姓名", trigger: "blur" }],
        phone: [{ required: true, message: "请输入手机号", trigger: "blur" }],
        addPhone: [
          { required: true, message: "请输入手机号", trigger: "blur" }
        ],
        unit: [{ required: true, message: "请选择货物单位", trigger: "blur" }],
        sendType: [
          { required: true, message: "请选择发货类型", trigger: "blur" }
        ],
        number: [{ required: true, message: "请输入订货量", trigger: "blur" }],
        worth: [{ required: true, message: "请输入货物价值", trigger: "blur" }],
        type: [{ required: true, message: "请选择货物名称", trigger: "blur" }],
        mode: [{ required: true, message: "请选择发货模式", trigger: "blur" }],
        carrier: [{ required: true, message: "请选择承运商", trigger: "blur" }],
        payment: [
          { required: true, message: "请选择付款方式", trigger: "blur" }
        ],
        time: [{ required: true, message: "请选择日期", trigger: "change" }],
        time2: [{ required: true, message: "请选择日期", trigger: "change" }]
      },
      // 地址薄
      searchVal: "",
      gridData: [
        {
          id: "1",
          name: "王小虎",
          phone: "175289663366",
          province: "浙江省",
          city: "杭州市",
          area: "淳安县",
          address: "梅峰岛小卖部"
        },
        {
          id: "2",
          name: "王2",
          phone: "175289663366",
          province: "浙江省",
          city: "杭州市",
          area: "淳安县",
          address: "梅峰岛小卖部"
        },
        {
          id: "3",
          name: "王3",
          phone: "175289663366",
          province: "浙江省",
          city: "杭州市",
          area: "淳安县",
          address: "梅峰岛小卖部"
        }
      ],
      addressDialog: false,
      addAddressDialog: false,
      radioIndex: "",
      radioData: {},
      radioData1: {},
      radioData2: {}
    };
  },
  computed: {
    totalPrice() {
      let sumPrice = 0;
      if (this.ruleForm.sendType == "大宗") {
        sumPrice = this.ruleForm.price * this.ruleForm.number;
      } else {
        sumPrice = this.ruleForm.price;
      }
      return sumPrice;
    }
  },
  created() {
    // if (this.ruleForm.goodsMes.typeList.length > 6) {
    //   this.goodsList = this.ruleForm.goodsMes.typeList.slice(0,6)
    // }
  },
  mounted() {},
  methods: {
    // 保存
    submitTo() {
      // console.log(UTCtime(this.ruleForm.time));
      // this.$refs.ruleForm.validate(valid => {
      //   if (valid) {
      apiSendGoods({
        conProvinces: this.ruleForm.province, //发货省
        conCity: this.ruleForm.city, //发货市
        conArea: this.ruleForm.area, //发货县
        conAddress: this.ruleForm.address, //发货详细地址
        consignor: this.ruleForm.name, //发货人
        conPhone: this.ruleForm.phone, //发货手机号
        provinces: this.ruleForm.province2, //收货省
        reCity: this.ruleForm.city2, //收货市
        reArea: this.ruleForm.area2, //收货县
        reAddress: this.ruleForm.address2, //收货详细地址
        receiving: this.ruleForm.name2, //收货人
        rePhone: this.ruleForm.phone2, //收货手机号
        pickupTime: UTCtime(this.ruleForm.time), //取货截止时间
        deliveryTime: UTCtime(this.ruleForm.time2), //要求送达时间
        name: this.ruleForm.type, //货物名称
        deliveryMode: this.ruleForm.sendType, //发货类型
        unitload: this.ruleForm.unit, //发货单位
        quantity: this.ruleForm.number, //订单量
        type: this.ruleForm.mode, //发货模式
        price: this.ruleForm.price, //运费单价
        enquiry: this.ruleForm.radio, //发布询价单
        totalPrice: this.totalPrice, //预估总价
        payment: this.ruleForm.payment, //付款方式
        carMode: this.other.carModel, //需求车型
        length: this.other.carLength, //需求车长
        loads: this.other.carWeight, //车辆载重
        factor: this.other.carLoss, //允许损耗
        remarks: this.other.remarks //备注
      })
        .then(res => {
          this.$router.push("order");
          this.$message({ message: "保存成功", type: "success" });
        })
        .catch(error => {
          console.log(error);
        });
      //   } else {
      //     this.$message({ message: "请完善填写内容", type: "error" });
      //     return false;
      //   }
      // });
    },
    // 点击任意位置选中
    getTemplateRow(index, row) {
      // console.log(row);
      this.radioData = row;
      this.radioIndex = row.id;
    },
    // 选择地址
    adressSure() {
      this.addressDialog = false;
      console.log(this.radioData);
    },
    // 删除
    deleteSure(index, rows) {
      rows.splice(index, 1);
    },
    // 修改
    reviseSure(rows) {
      this.addressDialog = false;
      this.addAddressDialog = true;
      this.sendMes.addName = rows.name;
      this.sendMes.addPhone = rows.phone;
      this.sendMes.province = rows.province;
      this.sendMes.city = rows.city;
      this.sendMes.area = rows.area;
      this.sendMes.addAddress = rows.address;
    },
    //新增
    addTo() {
      this.addressDialog = false;
      this.addAddressDialog = true;
    },
    // 接收省市区数据
    getProvince(val) {
      console.log(val);
      this.ruleForm.province = val;
    },
    getCity(val) {
      console.log(val);
      this.ruleForm.city = val;
    },
    getArea(val) {
      console.log(val);
      this.ruleForm.area = val;
    },
    getProvince2(val) {
      this.ruleForm.province2 = val;
    },
    getCity2(val) {
      this.ruleForm.city2 = val;
    },
    getArea2(val) {
      this.ruleForm.area2 = val;
    }
  }
};
</script>

<style lang="scss">
.addressRadio {
  .el-radio__label {
    display: none !important;
  }
  .el-table__body-wrapper td {
    border-left: none !important;
    border-right: none !important;
  }
  .el-table__body-wrapper {
    border: none !important;
    tr td:nth-of-type(1) {
      border-left: none !important;
    }
  }
}
.el-radio__label {
  padding-left: 0 !important;
}
.price1 .el-form-item__content {
  margin-left: 0 !important;
}
.price .el-select .el-input {
  width: 100px;
  .el-input__inner {
    background-color: #fff !important;
    border-bottom: 1px solid #dcdfe6 !important;
    border-top: 1px solid #dcdfe6 !important;
  }
}
.input-with-select .el-input-group__prepend {
  background-color: #fff;
}
</style>
<style lang="scss" scoped>
#sendGoods {
  min-height: 100%;
  padding: 24px;
  .personMes {
    border-bottom: 1px solid rgba(86, 170, 255, 0.1);
    .catalog {
      .tag {
        display: inline-block;
        width: 34px;
        height: 34px;
        line-height: 34px;
        text-align: center;
        border-radius: 50%;
        color: #fff;
        background-color: $blue;
        &.receive {
          background-color: rgb(216, 69, 45);
        }
      }
      .title {
        margin: 0 15px;
        font-size: 22px;
      }
      .tip {
        cursor: pointer;
        color: $blue;
      }
    }
    .addressbook {
      cursor: pointer;
      line-height: 86px;
      text-align: right;
      color: $blue;
    }
  }
  .goodsMes {
    color: rgba(0, 0, 0, 0.95);
    padding-top: 36px;
    box-sizing: border-box;
    border-bottom: 1px solid rgba(86, 170, 255, 0.1);
    .title {
      padding-left: 24px;
      margin-bottom: 24px;
    }
    .more {
      cursor: pointer;
      margin-left: 24px;
      color: $blue;
    }
  }
  .sendGoods {
    padding-top: 36px;
    .title {
      margin-bottom: 24px;
    }
  }
  .other {
    padding-top: 36px;
    .title {
      padding-left: 24px;
      margin-bottom: 24px;
    }
  }
  .radioRest input {
    border: 2px solid rgba(0, 0, 0, 1);
  }
  .addressRadio .iconimg {
    width: 20px;
    margin-right: 28px;
  }
  .addAddress .btn button,
  .addressRadio .btn button {
    cursor: pointer;
    margin: 24px auto;
    width: 120px;
    line-height: 40px;
    background: $blue;
    border-radius: 10px;
    color: #fff;
  }
}
</style>
